<template>
  <q-page class="row items-center justify-center">
    <co-card
      class="login-wrapper shadow-24"
      :bordered="false"
    >
      <!-- https://placeimg.com/430/500/nature -->
      <q-card-section horizontal>
        <q-img
          class="col-6"
          :src="imgsrc"
          v-if="$q.screen.gt.xs"
        >
          <div class="absolute-bottom-left text-subtitle2 text-center">
            Based on Quasar {{$q.version}}
          </div>
        </q-img>

        <q-card-section :class="`${$q.screen.gt.xs?'col-6':'col'} q-mt-xs q-px-xl q-py-md`">
          <div class="flex flex-center">
            <q-avatar :size="$q.screen.gt.xs?'100px':'80px'">
              <q-img src="~assets/logo.svg" />
            </q-avatar>
          </div>
          <div class="text-h5 text-primary q-mb-xs">登录</div>
          <co-form
            @submit="onSubmit"
            class="login-form my-form q-mt-lg"
          >
            <co-input
              :dense="false"
              class="q-mb-md"
              no-error-icon
              v-model.trim="form.username"
              placeholder="账号 demo"
              :rules="[ val => val && val.length > 0 || '请输入用户账号']"
            />
            <co-input
              :dense="false"
              class="q-mb-md"
              no-error-icon
              type="password"
              v-model.trim="form.password"
              placeholder="密码 123456"
              :rules="[ val => val && val.length > 0 || '请输入登录密码']"
            />
            <co-input
              :dense="false"
              class="q-mb-md"
              no-error-icon
              v-model.trim="form.verify"
              placeholder="验证码"
              :rules="[ val => val && val.length > 0 || '请输入验证码']"
            >
              <template v-slot:after>
                <img src=""
                  style="width:94px; min-width:80px" alt="验证码"/>
              </template>
            </co-input>
            <div class="column q-gutter-y-sm q-mt-none">
              <co-checkbox
                v-model="form.rememberMe"
                label="记住账号"
              />
            </div>
            <div class="q-mt-md column items-center">
              <co-btn
                label="登录"
                type="submit"
                color="primary"
                class="full-width"
              />
              <div class="q-mt-md">如果还没有账号？<router-link
                  to="/user/register"
                  class="text-primary"
                >点击注册</router-link>
              </div>
            </div>
          </co-form>

          <q-toolbar class="no-padding">
            <q-toggle :value="$q.dark.isActive" :val="true" label="DARK" @click.native="changeSetting({key:'darkMode', value: !$q.dark.isActive})"/>
          </q-toolbar>
          <q-toolbar class="no-padding">
            <brand-color />
          </q-toolbar>
        </q-card-section>
      </q-card-section>

      <q-inner-loading :showing="loading">
        <q-spinner-hourglass
          size="sm"
          color="primary"
        />
      </q-inner-loading>
    </co-card>
  </q-page>
</template>

<script>
import { mapActions } from 'vuex'
import Cookies from 'js-cookie'
import BrandColor from 'pages/components/brand-color.vue'
import { random } from '@/utils/index'

export default {
  components: {
    BrandColor
  },
  name: 'UserLogin',
  data () {
    return {
      imgsrc: '',
      loading: false,
      form: {
        username: '',
        password: '',
        rememberMe: false
      }
    }
  },
  created () {
    this.imgsrc = 'img/nature-' + (random() % 8) + '.jpg'
    // token 过期提示
    this.point()
  },
  computed: {
  },
  methods: {
    ...mapActions('settings', [
      'changeSetting'
    ]),
    onSubmit () {
      this.loading = true
      this.$store.dispatch('user/login', this.form).then(() => {
        this.loading = false
        const params = { redirect: this.$route.query.redirect || '/' }
        this.$router.push({ path: params.redirect })
      }).catch(e => {
        this.loading = false
        const message = e.message || '登录失败，请稍后重试！'
        this.$q.notify({ message })
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$q.notify({
          type: 'warning',
          message: '当前登录状态已过期，请重新登录！',
          timeout: 5000,
          position: 'top'
        })
        Cookies.remove('point')
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.login-wrapper, login-form
  width: 840px
  min-width: 260px
@media (max-width: 1023px)
  .login-wrapper, login-form
    width: 94%
@media (max-width: 599px)
  .q-pa-xl
    padding: 15px
</style>
